.workflows-row .top-row{
  margin:45px 0;
}



.workflows-row .top-row .slogan-row{
  margin-bottom:30px;
}

.workflows-row .top-row .slogan-row .slogan{
  font-size:44px;
  font-weight:500;
  color:#f57120
}

.workflows-row .top-row .slogan-row .slogan span{
    display:block;
  font-size:36px;
  font-weight:300;
  color:#000
}



.workflows-row .top-row .desc-row{

}

.workflows-row .top-row .desc-row .desc{
  font-size:18px;
  font-weight:300;

}




.workflows-row .wfs-con{
       grid-template-columns: repeat(3, 1fr);
    display: grid;
    grid-column-gap: 45px;
    grid-row-gap: 45px;
    margin-bottom:90px;
}



.workflows-row .wfs-con .wfs-item{
     background-color:#Fff;
}

.workflows-row .wfs-con .wfs-item .img-con{
    aspect-ratio:2/1;
    overflow:hidden;
    position:relative;
}

.workflows-row .wfs-con .wfs-item .img-con img{
     width:100%;
  height:100%;
  object-fit:cover;

}


.workflows-row .wfs-con .wfs-item .txt-con{
    padding:30px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.workflows-row .wfs-con .wfs-item .txt-con .head{
  color:#000;
  margin:0;
 font-size:20px;
 font-weight:500;
}

.workflows-row .wfs-con .wfs-item .txt-con .link{
  color:#f57120;
  font-size:18px;
  margin-top:10px;

}













.workflow-row .top-row{
    margin:45px 0;
}


.workflow-row .top-row .head-row{
 margin-bottom:30px;
}
.workflow-row .top-row .head-row .head{
    font-size:32px;
    font-weight:500;
    color:#000;
}

    .workflow-row .top-row .desc-row .desc {
       font-size:18px;
    }






    .workflow-row .wf-con{
    background-color:#fff;
    border:1px solid #bbb;
}



    .workflow-row .wf-con .wf-item{
    display:flex;

    position:relative;

}
        .workflow-row .wf-con .wf-item:not(:last-of-type){
  border-bottom:1px solid #bbb;
}


            .workflow-row .wf-con .wf-item .ttl-con{
    min-width:260px;
    display:flex;
    align-items:center;
    position:relative;

}
                        .workflow-row .wf-con .wf-item .txt-con{
    flex-grow:1;
    padding:30px;
    display:flex;
        align-items:center;
}

            .workflow-row .wf-con .wf-item .num-con{
    min-width:222px;
    position:relative;
    overflow:hidden;
                       min-height:140px;
                   position:relative;
}



            .workflow-row .wf-con .wf-item:not(:last-of-type):after{
content:'';
position:absolute;
top:100%;
right:65px;
width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 16px 18px 0 18px;
   border-color: #fff transparent transparent transparent;
   transform: rotate(0deg);


}



            .workflow-row .wf-con .wf-item:not(:last-of-type):before{
content:'';
position:absolute;
top:100%;
right:63px;
 width: 0px;
   height: 0px;
   border-style: solid;
   border-width: 18px 20px 0 20px;
   border-color: #bbb transparent transparent transparent;
   transform: rotate(0deg);


}



            .workflow-row .wf-con .wf-item .ttl-con .ttl{
   color:#f57120;
   font-size:20px;
   font-weight:500;
   margin-right:15px;


}

            .workflow-row .wf-con .wf-item .ttl-con .icon{
                min-width:45px;
                margin-right:30px;

}
            .workflow-row .wf-con .wf-item .ttl-con .icon img{
  width:45px;
  height:45px;

}

                        .workflow-row .wf-con .wf-item .txt-con .txt{
    font-size:18px;
    color:#000;

}
            .workflow-row .wf-con .wf-item .num-con .num{
                width:100%;
                height:100%;
   color:#eee;
   font-size:250px;

   z-index:10;
   font-weight:600;



       display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:20px;
    left:0;
        user-select: none;
}




@media (max-width: 1499px){

}

@media(max-width:1199px) {


.workflows-row .wfs-con{
       grid-template-columns: repeat(2, 1fr);

}


}
@media(max-width:991px) {



    .workflow-row .wf-con .wf-item{
    flex-wrap:wrap;


}


            .workflow-row .wf-con .wf-item .ttl-con{

    min-width:50%;
    flex-grow:1;
    order:1;
    position:relative;
    z-index:2;
    margin-top:30px;


}
                        .workflow-row .wf-con .wf-item .txt-con{
    min-width:100%;
    order:3;
     position:relative;
    z-index:2;

}

            .workflow-row .wf-con .wf-item .num-con{
                position:absolute;
                left:0;
                top:0;
                z-index:1;
                min-height:initial;
                height:100%;
                min-width:145px;
}

                        .workflow-row .wf-con .wf-item .num-con .num{
              max-height:150px;
}







}
@media(max-width:767px) {

    .workflows-row .top-row {
        margin: 20px 0;
    }



        .workflows-row .top-row .slogan-row {
            margin-bottom: 15px;
        }

            .workflows-row .top-row .slogan-row .slogan {
                font-size: 30px;
            }

                .workflows-row .top-row .slogan-row .slogan span {
                    font-size: 24px;
                }



        .workflows-row .top-row .desc-row {
        }

            .workflows-row .top-row .desc-row .desc {
                font-size: 14px;
            }




    .workflows-row .wfs-con {
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        margin-bottom: 50px;
    }





        .workflows-row .wfs-con .wfs-item .txt-con {
            padding: 10px;
        }


            .workflows-row .wfs-con .wfs-item .txt-con .head {
                font-size: 14px;
            }

            .workflows-row .wfs-con .wfs-item .txt-con .link {
                font-size: 12px;
                margin-top: 5px;
            }






    .workflow-row .top-row {
        margin: 20px 0;
    }


        .workflow-row .top-row .head-row {
            margin-bottom: 15px;
        }

            .workflow-row .top-row .head-row .head {
                font-size: 24px;
            }

        .workflow-row .top-row .desc-row .desc {
            font-size: 14px;
        }




    .workflow-row .wf-con .wf-item .txt-con {
        padding: 15px;
    }

    .workflow-row .wf-con .wf-item .num-con {
        min-width: 110px;
    }



    .workflow-row .wf-con .wf-item .ttl-con .ttl {
        font-size: 16px;
        margin-right: 10px;
    }

    .workflow-row .wf-con .wf-item .ttl-con .icon {
        min-width: 32px;
        margin-right: 15px;
    }

        .workflow-row .wf-con .wf-item .ttl-con .icon img {
            width: 32px;
            height: 32px;
        }

    .workflow-row .wf-con .wf-item .txt-con .txt {
        font-size: 14px;
    }

    .workflow-row .wf-con .wf-item .num-con .num {
        font-size: 180px;
        top: 20px;
        left: 0;
        max-height: 100px;
    }



    .workflow-row .wf-con .wf-item:not(:last-of-type):after {
        right: 34px;
        border-width: 12px 14px 0 14px;
    }



    .workflow-row .wf-con .wf-item:not(:last-of-type):before {
        right: 32px;
        border-width: 14px 16px 0 16px;
    }
}